<template>
  <div class="container">
    <div class="statement_container">
      <div class="search">
        <div class="item">
          <div class="label">用户：</div>
          <el-input
            v-model="recordForm.wxName"
            style="width: 193px;"
            @input="getList()"
            placeholder="用户名"
          ></el-input>
        </div>
        <div class="item">
          <div class="label">会议室：</div>
          <el-select
            v-model="recordForm.roomId"
            placeholder="请选择"
            @change="getList()"
            clearable
          >
            <el-option
              v-for="item in roomList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <div class="label">日期：</div>
          <el-date-picker
            v-model="recordForm.schedule"
            type="date"
            placeholder="选择日期"
            @change="getList()"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="table_container">
        <el-table :data="tableList" border max-height="550">
          <el-table-column prop="img" align="center" width="120" label="图片">
            <template slot-scope="scope">
              <el-image style="width: 40px; height: 40px;" :src="scope.row.img">
                <div slot="error" class="image-slot">
                  <el-image :src="require('../../assets/img/lolo.png')">
                  </el-image>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="wxName" label="预约人" align="center">
          </el-table-column>
          <el-table-column prop="roomName" label="预约会议室" align="center">
          </el-table-column>
          <el-table-column
            prop="scheduleRange"
            label="预约时间段"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="schedule" label="预约时间" align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deleteHandle(scope.row.id)"
                v-if="scope.row.state == 0"
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div style="position: absolute;bottom: 20px;left: 30%;">
          <!-- 分页组件 -->
          <Pagination
            v-bind:child-msg="pageparm"
            @callFather="callFather"
          ></Pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from "../../components/Pagination";
import {
  meetingRecordList,
  getMeetingListparm,
  delMeetingRecord
} from "../../api/meeting";
export default {
  components: {
    Pagination
  },
  data() {
    return {
      currentTime: "",
      recordForm: {
        wxName: "",
        roomId: null,
        companyName: "",
        schedule: ""
      },
      roomList: [],
      pageparm: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      tableList: []
    };
  },
  created() {
    this.currentTime = new Date().getTime();
    this.getList();
    this.getMeetingListparm();
  },
  methods: {
    //获取流水列表数据
    async getList() {
      let req = {
        pageIndex: this.pageparm.pageIndex,
        pageSize: this.pageparm.pageSize,
        wxName: this.recordForm.wxName,
        roomId: this.recordForm.roomId == "" ? null : this.recordForm.roomId,
        schedule: this.recordForm.schedule
      };
      const res = await meetingRecordList(req);
      if (res.code == 200 && res.data) {
        this.tableList = res.data.items;
        this.pageparm.total = res.data.totalCount;
        this.tableList.forEach(item => {
          item.schedule = item.schedule.split(" ")[0];
          item.endTime = new Date(
            item.schedule.split(" ")[0].replaceAll("-", "/") +
              " " +
              item.scheduleRange.split("-")[1] +
              ":00"
          ).getTime();
          if (this.currentTime > item.endTime) {
            item.state = 1;
          } else {
            item.state = 0;
          }
        });
      } else {
        this.tableList = [];
      }
    },

    //获取会议室
    async getMeetingListparm() {
      const res = await getMeetingListparm();
      if (res.code == 200 && res.data) {
        this.roomList = res.data;
      } else {
        this.roomList = [];
      }
    },

    //删除
    deleteHandle(data) {
      this.$confirm("确定删除吗？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const res = await delMeetingRecord({ id: data });
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.getList();
        } else {
          this.$message.success(res.message);
        }
      });
    },

    //分页
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.pageSize = parm.size;
      this.getList();
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  .statement_container {
    width: 100%;
    .search {
      width: 100%;
      height: 100px;
      background-color: #fff;
      display: flex;
      align-items: center;
      border: 1px solid rgb(204, 204, 204);
      border-radius: 4px;
      margin-top: 10px;
      padding-left: 27px;
      box-sizing: border-box;
      .item {
        display: flex;
        align-items: center;
        margin-left: 30px;
        .label {
          color: rgb(92, 92, 92);
          font-family: 思源黑体;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }
    .table_container {
      width: 100%;
      height: 75vh;
      background: rgb(255, 255, 255);
      border: 1px solid rgb(204, 204, 204);
      border-radius: 4px;
      margin-top: 16px;
      padding: 22px;
      box-sizing: border-box;
      position: relative;
      .total {
        width: 100%;
        position: absolute;
        bottom: 80px;
        right: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: rgb(143, 135, 135);
        font-family: 思源黑体;
        font-size: 12px;
        font-weight: 400;
      }
    }
  }
}
</style>
